<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水压地图展示</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="assets/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="assets/select2%204.0.3/css/select2.min.css" rel="stylesheet">
    <link href="assets/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="assets/css/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet">
    <link href="assets/css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="assets/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/ipicture/css/iPicture_location.css" rel="stylesheet">
    <link href="assets/img/log.ico" rel="shortcut icon">
    <style type="text/css">
        .changeColor a:hover{
            color: white;
            cursor:pointer;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div class="gray-bg dashbard-1">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>水压地图展示</h2>
            </div>
        </div>
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-md-2">
                    <div class="box box-warning">
                        <div class="box-header">
                            <h4 class="box-title"><b>当前区域数据</b></h4>
                        </div>
                        <div class="box-body">
                            <pre class="prettyprint" style="border: none;height: 650px;">
                                <div id="loction_tree"></div>
                            </pre>
                        </div>
                    </div>
                </div>
                <div class="col-md-10">
                    <section class="invoice">
                        <div style="border: none;">
                            <div id="iPicture" data-interaction="hover" style="width: 100%;height: 100%">
                                <div class="ip_slide" id="map_div" style="width: 100%;height: 100%">
                                    <img id="show_map" src="assets/img/error.jpg" alt="加载地图失败" width="100%" />
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Mainly scripts -->
<script src="assets/js/jquery-2.1.1.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="assets/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<script src="assets/js/inspinia.js"></script>
<script src="assets/js/plugins/pace/pace.min.js"></script>
<script src="assets/js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/js/plugins/fullcalendar/moment.min.js"></script>
<script src="assets/js/plugins/jsTree/jstree.min.js"></script>
<script src="assets/ipicture/js/jquery.ipicture_location.js"></script>
<script src="assets/customize.js"></script>

<script>
    var server;
    var locationObjArr;
    $(function () {

        dataInit();
    });
    function dataInit() {
        $.ajax({

            url:"${baseURL}/json/geo_location/getTree",
            async:false,
            success:function (data_in) {
                locationObjArr = data_in.data;
                $('#loction_tree').data('jstree',false).empty();
                $('#loction_tree').jstree({
                    'core' : {
                        'data' : locationObjArr,
                        'async' : true,
                    }
                });
            }
        });
    }
    $('#loction_tree').on('select_node.jstree', function (e, data) {
        $("#map_div div").remove();
        mapId = data.node.id;
        level = data.node.original.level;
        var imgUrl = "${baseURL}/picture/geo_location/download?id=" + mapId;
        $("#show_map").attr("src", imgUrl);
        if(level == 1 || level ==2){
            $.ajax({
                type:"post",
                contentType: "application/json",
                dataType: "json",
                url:"${baseURL}/json/water_device/channel/getAllStatus",
                data:JSON.stringify({"geo_id":mapId}),
                async:false,
                success:function (data_in) {
                    var childrenData = data_in.data;
                    for(var i in childrenData){
                        if(childrenData[i].status){
                            var x = parseFloat(childrenData[i].pos_x) * 100 ;
                            var y = parseFloat(childrenData[i].pos_y) * 100 ;
                            x = x>0?x+'%':0;
                            y = y>0?y+'%':0;
                            var divs = "";
                            divs ='<div class="ip_tooltip ip_img20" style="top: '+y+'; left: '+x+';z-index: 100;"  data-tooltipbg="bgblack" data-round="roundBgR" data-animationtype="btt-slide" >' +
                                    '<p style="width: 100%;height: 100%" class="changeColor">'+childrenData[i].name+'</p>'+
                                    '</div>';
                            $("#map_div").append(divs);
                        }else {
                            var x = parseFloat(childrenData[i].pos_x) * 100 ;
                            var y = parseFloat(childrenData[i].pos_y) * 100 ;
                            x = x>0?x+'%':0;
                            y = y>0?y+'%':0;
                            var divs = "";
                            divs ='<div class="ip_tooltip ip_img20" style="top: '+y+'; left: '+x+';z-index: 100;"  data-tooltipbg="bgblack" data-round="roundBgG" data-animationtype="btt-slide" >' +
                                    '<p style="width: 100%;height: 100%" class="changeColor">'+childrenData[i].name+'</p>'+
                                    '</div>';
                            $("#map_div").append(divs);
                        }
                    }
                    $( "#iPicture" ).iPicture();
                }
            })

        }
        else if(level ==3){
            console.log("monitor");
//            var area_display = document.getElementById("area_display");
//            area_display.style.display = "none";
//            setTimeout(" map_floor_init(mapId)",1000);
            $.ajax({
                type:"post",
                contentType: "application/json",
                dataType: "json",
                url:"${baseURL}/json/water_device/channel/getAllStatus",
                data:JSON.stringify({"geo_id":mapId}),
                async:false,
                success:function (data_in) {
                    var childrenData = data_in.data;
                    console.log(childrenData);
                    for(var i in childrenData){
                        if(childrenData[i].status){
                            var x = parseFloat(childrenData[i].pos_x) * 100 ;
                            var y = parseFloat(childrenData[i].pos_y) * 100 ;
                            x = x>0?x+'%':0;
                            y = y>0?y+'%':0;
                            var divs = "";
                            divs ='<div class="ip_tooltip ip_img20" style="top: '+y+'; left: '+x+';z-index: 100;"  data-tooltipbg="bgblack" data-round="roundBgR" data-animationtype="btt-slide" >' +
                                    '<p style="width: 100%;height: 100%" class="changeColor">'+childrenData[i].monitor_name+'</p>'+
                                    '</div>';
                            $("#map_div").append(divs);
                        }else {
                            var x = parseFloat(childrenData[i].pos_x) * 100 ;
                            var y = parseFloat(childrenData[i].pos_y) * 100 ;
                            x = x>0?x+'%':0;
                            y = y>0?y+'%':0;
                            var divs = "";
                            divs ='<div class="ip_tooltip ip_img20" style="top: '+y+'; left: '+x+';z-index: 100;"  data-tooltipbg="bgblack" data-round="roundBgG" data-animationtype="btt-slide" >' +
                                    '<p style="width: 100%;height: 100%" class="changeColor">'+childrenData[i].monitor_name+'</p>'+
                                    '</div>';
                            $("#map_div").append(divs);
                        }
                    }
                    $( "#iPicture" ).iPicture();
                }
            })
        }
    });
</script>
</body>
</html>